<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	body {
		/* background-color: #000; */
	}

	.border-animation {
		--width: 400px;
		--height: 100px;
		--width-burden: -400px;
		--border-width: 6px;
		--runtime: 1s;
		position: absolute;
		width: var(--width);
		height: var(--height);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		overflow: hidden;
		border-radius: 2px;
	}

	.border-animation div {
		position: absolute;
		border-radius: 50px;
	}
	.show-border{
		border: 6px solid #246fe5;
	}

	.top {
		top: 0;
		left: var(--width);
		width: var(--width);
		height: var(--border-width);
		animation: run-top var(--runtime) linear forwards;
		animation-delay: 0s;
		background: linear-gradient(to left, #ffffff, #246fe5);
	}

	.left {
		top: var(--width-burden);
		left: 0;
		height: var(--width);
		width: var(--border-width);
		animation: run-left var(--runtime) linear forwards;
		animation-delay: 0.5s;
		background: linear-gradient(to bottom, #fff, #246fe5);
	}

	.bottom {
		bottom: 0;
		left: var(--width-burden);
		height: var(--border-width);
		width: var(--width);
		animation: run-bottom var(--runtime) linear forwards;
		animation-delay: 0.75s;
		background: linear-gradient(to right, #fff, #246fe5);
	}

	.right {
		top: var(--width);
		right: 0;
		height: var(--width);
		width: var(--border-width);
		animation: run-right var(--runtime) linear forwards;
		animation-delay: 1s;
		background: linear-gradient(to top, #fff, #246fe5);
	}

	@keyframes run-top {
		from {
			left: var(--width)
		}

		to {
			left: var(--width-burden)
		}
	}

	@keyframes run-left {
		from {
			top: var(--width-burden)
		}

		to {
			top: var(--width)
		}
	}

	@keyframes run-bottom {
		from {
			left: var(--width-burden)
		}

		to {
			left: var(--width)
		}
	}

	@keyframes run-right {
		from {
			top: var(--width)
		}

		to {
			top: var(--width-burden)
		}
	}
</style>

<body>
	<div class="border-animation">
		<div class="top"></div>
		<div class="left"></div>
		<div class="bottom"></div>
		<div class="right"></div>
	</div>
	<script>
		const right=document.querySelector('.right')
		const box=document.querySelector('.border-animation')
		right.addEventListener('animationend',()=>{
			console.log(666)
			box.classList.add('show-border')
		})
	</script>
</body>

</html>